import { Table } from "@/components/table/table";
import { THead } from "@/components/table/thead";
import { TBody } from "@/components/table/tbody";
import { Tr } from "@/components/table/tr";
import { Td } from "@/components/table/td";
import { useMemo } from "react";
import {
  encryptEmail,
  encryptPassword,
  encryptPhone,
  encryptUser,
} from "@/utils/reg";

interface LoginDataType {
  registerData: any[];
  findRegisterData?: any[];
}

export const BatchRegister = ({
  registerData,
  findRegisterData,
}: LoginDataType): React.ReactElement => {
  const setActionElement = (loginNumber: number) => {
    switch (loginNumber) {
      case 1:
        return <span className="login success">注册成功</span>;
      case 2:
        return <span className="login success">注册成功</span>;
      default:
        return <span className="login error">注册异常</span>;
    }
  };

  const setStatusElement = (status: number) => {
    switch (status) {
      case 1:
        return <span className="login success">正常</span>;
      case 2:
        return <span className="login">下线</span>;
      default:
        return <span className="login error">离线</span>;
    }
  };

  const setAuthElement = (auth: number): React.ReactElement => {
    if (auth === 1) {
      return <span>最高权限</span>;
    }
    return <span>内容权限</span>;
  };

  const loginTableElement = useMemo(() => {
    return (
      <Table>
        <THead>
          <Tr>
            <Td>ID</Td>
            <Td>用户名</Td>
            <Td>密码</Td>
            <Td>姓名</Td>
            <Td>邮箱地址</Td>
            <Td>联系方式</Td>
            <Td>授权时间</Td>
            <Td>权限</Td>
            <Td>操作</Td>
            <Td>状态</Td>
          </Tr>
        </THead>
        <TBody>
          {findRegisterData === undefined
            ? registerData.map((item, index) => (
                <Tr key={index}>
                  <Td
                    isShadow
                    radiusPostion={
                      index === registerData.length - 1 ? "bottom-left" : ""
                    }
                  >
                    {item.id}
                  </Td>
                  <Td isShadow>{item.batch_user}</Td>
                  <Td isShadow>
                    {encryptPassword(item.batch_password.padEnd(5, "1"))}
                  </Td>
                  <Td isShadow>{encryptUser(item.batch_name)}</Td>
                  <Td isShadow>{encryptEmail(item.batch_email)}</Td>
                  <Td isShadow>{encryptPhone(item.batch_phone)}</Td>
                  <Td isShadow>{item.auth_time}</Td>
                  <Td isShadow>{setAuthElement(item.auth)}</Td>
                  <Td isShadow>{setActionElement(item.register_status)}</Td>
                  <Td
                    isShadow
                    radiusPostion={
                      index === registerData.length - 1 ? "bottom-right" : ""
                    }
                  >
                    {setStatusElement(item.register_status)}
                  </Td>
                </Tr>
              ))
            : findRegisterData.map((item, index) => (
                <Tr key={index}>
                  <Td
                    isShadow
                    radiusPostion={
                      index === findRegisterData.length - 1 ? "bottom-left" : ""
                    }
                  >
                    {item.id}
                  </Td>
                  <Td isShadow>{item.batch_user}</Td>
                  <Td isShadow>
                    {encryptPassword(item.batch_password.padEnd(5, "1"))}
                  </Td>
                  <Td isShadow>{encryptUser(item.batch_name)}</Td>
                  <Td isShadow>{encryptEmail(item.batch_email)}</Td>
                  <Td isShadow>{encryptPhone(item.batch_phone)}</Td>
                  <Td isShadow>{item.auth_time}</Td>
                  <Td isShadow>{setAuthElement(item.auth)}</Td>
                  <Td isShadow>{setActionElement(item.register_status)}</Td>
                  <Td
                    isShadow
                    radiusPostion={
                      index === findRegisterData.length - 1
                        ? "bottom-right"
                        : ""
                    }
                  >
                    {setStatusElement(item.register_status)}
                  </Td>
                </Tr>
              ))}
        </TBody>
      </Table>
    );
  }, [registerData, findRegisterData]);
  return <>{loginTableElement}</>;
};
